<template>
  <div ref="LineChartContainer" class="chart"></div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'TrainLine',
  props: {
    BaselineData: {
      type: Array,
      default: () => [1.764, 1.81, 0.843, 1.291, 1.436, 1.058, 1.229, 1.753, 1.43, 1.295, 1.554, 1.003, 1.361, 1.718, 1.507, 1.995, 1.186]
    },
    xAxisData: {
      type: Array,
      default: () => ['20', '40', '60', '80', '100', '120', '140', '160', '180', '200', '220', '240', '260', '280', '300']
    },
    yAxisData: {
      type: Array,
      default: () => ['0.8', '1.0', '1.2', '1.4', '1.6', '1.8', '2.0', '2.2', '2.4', '2.6', '2.8']
    },
    ImprovData: {
      type: Array,
      default: () => [1.981, 2.246, 1.709, 1.789, 2.582, 1.363, 1.31, 1.996, 2.358, 2.673, 1.269, 1.383, 2.537, 1.794, 2.559, 2.451, 2.113]
    }
  },
  data() {
    return {
      TrainLine: null
    };
  },
  watch: {
    isOptionChange() {
      this.initBarChart();
    }
  },
  computed: {
    isOptionChange() {
      return { yAxisData: this.yAxisData, seriesData: this.seriesData };
    }
  },
  mounted() {
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      const container = this.$refs.LineChartContainer;
      if (!this.TrainLine) {
        this.TrainLine = echarts.init(container);
      }
      const chart = this.TrainLine;
      var option = {
        xAxis: {
          type: 'category',
          data: this.xAxisData,
          name: '时序',
          boundaryGap: false // 确保数据点与刻度对齐
        },
        yAxis: {
          type: 'value',
          min: 0.8,//从0.8开始
          max: 2.8,
          interval: 0.4,//设置间隔0.4
          name: '响应时间'
        },
        grid: {//样式布局
          top: "10%",
          left: "5%"
        },
        legend: {//图例
          orient: 'vertical',
          top: '0%',
          right: '5%'
        },
        series: [
          {
            name: "基准处理方法",
            data: this.BaselineData,
            type: 'line',
            lineStyle: {
              color: 'blue'
            },
            symbol: 'diamond',
            symbolSize: 10,
            itemStyle: {
              color: 'blue'
            }
          }, {
            name: "优化处理方法",
            data: this.ImprovData,
            type: 'line',
            lineStyle: {
              color: 'red'
            },
            symbol: 'triangle',
            symbolSize: 10,
            itemStyle: {//设置拐点的颜色
              color: 'red'
            }
          }
        ]
      };
      chart.setOption(option);
    }
  }
});
</script>

<style lang='scss' scoped>
.chart {
  width: 100%;
  height: 300px;
  margin-top: 0;
  padding-top: 0;
}
</style>
